<template>
	<view class="content">
		<view class="zcon1">
			<input type="text" v-model="phone" placeholder="请输入手机号" />
		</view>
		<view class="zcon1">
			<input type="text" v-model="code" placeholder="请输入验证码" />
			<view class="txt3" @tap="sendCode">{{sendTime}}</view>
		</view>
		<view class="btnsave" @tap="jump">下一步</view>
	</view>
</template>

<script>
	const app = getApp();
	export default {
		data() {
			return {
				phone:'',
				//设置初始的状态、包含字体、颜色、还有等待事件 > <
				sendTime: '获取验证码',
				sendColor: '#363636',
				snsMsgWait: 60,
				code:''
			};
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad(options) {
			var that = this;
		},
		/**
		 * 生命周期函数--监听页面初次渲染完成
		 */
		onReady() {},
		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow() {},
		/**
		 * 生命周期函数--监听页面隐藏
		 */
		onHide() {},
		/**
		 * 生命周期函数--监听页面卸载
		 */
		onUnload() {},
		/**
		 * 页面相关事件处理函数--监听用户下拉动作
		 */
		onPullDownRefresh() {},
		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom() {},
		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage() {},
		methods: {
			jump(){
				uni.navigateTo({
					url:'./password1'
				})
			},
			// 获取验证码
			  sendCode: function() {
			    var that = this;
			
			//     if (this.tel == "") {
			//       this.toast('请输入手机号');
			//       return;
			//     }
			
			//     if (!(/^1(3[0-9]|4[5,7]|5[0,1,2,3,5,6,7,8,9]|6[2,5,6,7]|7[0,1,7,8,6]|8[0-9]|9[1,8,9])\d{8}$/.test(this.tel))) {
			//       this.toast('手机号输入错误');
			//       return;
			//     }
			
			    // 60秒后重新获取验证码
			    var inter = setInterval(function() {
			      this.smsFlag = true
			      this.sendColor = '#cccccc'
			      this.sendTime = this.snsMsgWait + 's后重发'
			      this.snsMsgWait = this.snsMsgWait - 1
			      if (this.snsMsgWait < 0) {
			        clearInterval(inter)
			        this.sendColor = '#363636'
			        this.sendTime = '发送验证码'
			        this.snsMsgWait = 60
			        this.smsFlag = false
			      }
			    }.bind(this), 1000);
			
			    // 写自己的服务器和接口- - 
			    // wx.request({
			    //   url: ptserviceUrl + 'sendCode',
			    //   data: {
			    //     mobiles: this.data.tel,
			    //   },
			    //   method: "POST",
			    //   header: {
			    //     'content-type': "application/x-www-form-urlencoded"
			    //   },
			    //   success(res) {
			    //     ////console.log(res);
			    //     if (res.data.success) {
			    //       that.toast('短信验证码发送成功，请注意查收');
			    //     }
			    //   }
			    // })
			  },
		}
	};
</script>
<style>
	.btnsave{
		width: 700rpx;
		height: 94rpx;
		background: #24C373;
		border-radius: 8rpx;
		display: table;
		margin: 50px auto;
		text-align: center;
		line-height: 94rpx;
		font-family: PingFang SC;
		font-weight: bold;
		font-size: 36rpx;
		color: #FFFFFF;
	}
	.txt3{
		width: 152rpx;
		height: 62rpx;
		background: #24C373;
		border-radius: 4rpx;
		text-align: center;
		line-height: 62rpx;
		position: absolute;
		top: 50%;
		right: 24rpx;
		margin-top: -31rpx;
		font-family: PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #FFFFFF;
		padding: 0px 10px;
	}
	.zcon1>input{
		width: 100%;
		height: 100rpx;
		display: table;
		font-family: PingFang SC;
		font-weight: 400;
		font-size: 32rpx;
		color: #999999;
		box-sizing: border-box;
		padding-right: 100px;
	}
	.zcon1{
		width: 100%;
		height: 100rpx;
		position: relative;
		display: table;
		background-color: #fff;
		box-sizing: border-box;
		padding: 0px 24rpx;
		margin-bottom: 30rpx;
	}
	.txt2{
		width: 100%;
		height: auto;
		display: table;
		text-align: center;
		font-family: PingFang SC;
		font-weight: 400;
		font-size: 32rpx;
		color: #333333;
	}
	.txt1{
		width: 100%;
		height: auto;
		display: table;
		text-align: center;
		font-family: PingFang SC;
		font-weight: bold;
		font-size: 56rpx;
		color: #333333;
		line-height: 60rpx;
		margin: 10px 0px;
	}
	.txt{
		width: 100%;
		height: auto;
		display: table;
		text-align: center;
		font-family: PingFang SC;
		font-weight: 400;
		font-size: 32rpx;
		color: #333333;
		line-height: 60rpx;
	}
	.zcon{
		width: 100%;
		height: auto;
		display: table;
		background-color: #fff;
		padding: 40px 0px;
	}
	page{
		background-color: #f6f6f6;
	}
	.content {
		width: 100%;
		height: auto;
		display: table;
	}
</style>